<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="logo-section">
          <div class="logo-icon">
            <svg width="24" height="24" viewBox="0 0 60 60" fill="none">
              <rect width="60" height="60" rx="16" fill="#000"/>
              <path d="M20 30L28 38L40 22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h1 class="app-title">AutoRun</h1>
        </div>
        <div class="user-section">
          <span class="welcome-text">{{ userInfo.username || 'admin' }}</span>
          <button class="logout-btn" @click="handleLogout">退出登录</button>
        </div>
      </div>
    </header>

    <!-- 主体布局 -->
    <div class="main-layout">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <nav class="nav-menu">
          <div class="nav-item"
               :class="{ active: activeMenu === 'windows' }"
               @click="setActiveMenu('windows')">
            <div class="nav-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="9" y1="9" x2="15" y2="15"/>
                <line x1="15" y1="9" x2="9" y2="15"/>
              </svg>
            </div>
            <span class="nav-text">窗口设置</span>
          </div>
          <div class="nav-item"
               :class="{ active: activeMenu === 'scripts' }"
               @click="setActiveMenu('scripts')">
            <div class="nav-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="16,18 22,12 16,6"/>
                <polyline points="8,6 2,12 8,18"/>
              </svg>
            </div>
            <span class="nav-text">脚本配置</span>
          </div>
          <!-- 管理员专用功能 -->
          <div v-if="userInfo.is_admin"
               class="nav-item"
               :class="{ active: activeMenu === 'users' }"
               @click="setActiveMenu('users')">
            <div class="nav-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                <circle cx="12" cy="7" r="4"/>
              </svg>
            </div>
            <span class="nav-text">用户管理</span>
          </div>
          <div v-if="userInfo.is_admin"
               class="nav-item"
               :class="{ active: activeMenu === 'apk' }"
               @click="setActiveMenu('apk')">
            <div class="nav-icon">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="4" y="4" width="16" height="16" rx="2" ry="2"/>
                <rect x="9" y="9" width="6" height="6"/>
                <line x1="9" y1="1" x2="9" y2="4"/>
                <line x1="15" y1="1" x2="15" y2="4"/>
              </svg>
            </div>
            <span class="nav-text">APK管理</span>
          </div>
        </nav>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, nextTick } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'DashboardLayout',
  setup() {
    const router = useRouter()
    const userInfo = ref({
      username: '',
      is_admin: false
    })
    const activeMenu = ref('windows')

    onMounted(async () => {
      // 检查是否已登录
      const token = localStorage.getItem('token')
      const user = localStorage.getItem('user')
      
      if (!token || !user) {
        console.warn('请先登录')
        router.push('/login')
        return
      }

      try {
        const parsedUser = JSON.parse(user)
        userInfo.value = {
          username: parsedUser.username || '',
          is_admin: parsedUser.is_admin || false,
          ...parsedUser
        }

        // 使用nextTick确保DOM已经渲染完成
        await nextTick()

        // 根据当前路由设置激活菜单
        const currentRoute = router.currentRoute.value.name
        if (currentRoute === 'WindowSettings') {
          activeMenu.value = 'windows'
        } else if (currentRoute === 'ScriptConfig') {
          activeMenu.value = 'scripts'
        } else if (currentRoute === 'UserManagement') {
          activeMenu.value = 'users'
        } else if (currentRoute === 'APKManagement') {
          activeMenu.value = 'apk'
        }
      } catch (error) {
        console.error('用户信息解析失败:', error)
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        router.push('/login')
      }
    })

    const setActiveMenu = (menu) => {
      activeMenu.value = menu
      if (menu === 'windows') {
        router.push('/dashboard/windows')
      } else if (menu === 'scripts') {
        router.push('/dashboard/scripts')
      } else if (menu === 'users') {
        router.push('/dashboard/users')
      } else if (menu === 'apk') {
        router.push('/dashboard/apk')
      }
    }

    const handleLogout = async () => {
      try {
        const confirmed = confirm('确定要退出登录吗？')
        if (!confirmed) return

        // 清除本地存储
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        console.log('已退出登录')
        router.push('/login')
      } catch {
        // 用户取消操作
      }
    }

    return {
      userInfo,
      activeMenu,
      setActiveMenu,
      handleLogout
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  height: 60px;
  width: 100%;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-title {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.user-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.welcome-text {
  color: #333;
  font-size: 14px;
  font-weight: 400;
}

.logout-btn {
  background: none;
  border: none;
  color: #1890ff;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.logout-btn:hover {
  color: #40a9ff;
}

.main-layout {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background: #fff;
  border-right: 1px solid #e5e5e5;
  padding: 16px 0;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 16px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  font-size: 14px;
  position: relative;
}

.nav-item:hover {
  background: #f0f0f0;
  color: #333;
}

.nav-item.active {
  background: #1890ff;
  color: white;
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-item.active .nav-icon {
  color: white;
}

.nav-item .nav-icon {
  color: #666;
}

.nav-text {
  font-size: 14px;
  white-space: nowrap;
}

.main-content {
  flex: 1;
  overflow: auto;
  background: #f5f5f5;
  padding: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 180px;
  }
  
  .header-content {
    padding: 0 16px;
  }
  
  .main-content {
    padding: 16px;
  }
  
  .app-title {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .sidebar {
    position: fixed;
    left: -200px;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 50;
    transition: left 0.3s ease;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }
  
  .nav-menu {
    padding: 0 12px;
  }
  
  .nav-item {
    padding: 10px 12px;
  }
  
  .header-content {
    padding: 0 12px;
  }
  
  .user-section {
    gap: 12px;
  }
  
  .welcome-text {
    font-size: 13px;
  }
  
  .logout-btn {
    font-size: 13px;
  }
}
</style>
